<template>
  <div style="margin: 40px 20px">
    <!-- 挂号订单信息 -->
    <el-card v-if="!isDetail" style="min-width: 960px; height: 600px">
      <template #header>
        <div class="title">
          <span>挂号订单</span>
        </div>
      </template>
      <div style="width: 1000px">
        <!-- 下拉框选择就诊人和订单状态 -->
        <div class="selection">
          <span style="font-size: 14px">就诊人</span>
          <el-select style="margin: 0 10px" v-model="selectPatient">
            <el-option label="选择所有患者" :value="0"></el-option>
            <el-option
              v-for="patient in patientList"
              :key="patient.id"
              :label="patient.name"
              :value="patient.id"
            ></el-option>
          </el-select>
          <span style="font-size: 14px; margin-right: 5px">订单状态</span>
          <el-select style="margin: 0 10px">
            <el-option label="选择所有订单状态" :value="0"> </el-option>
            <el-option
              v-for="status in statusList"
              :key="status.status"
              :label="status.comment"
              :value="status.status"
            ></el-option>
          </el-select>
        </div>
        <!-- 用表格展示就诊相关信息 -->
        <div style="margin: 10px">
          <el-table
            :data="orderDetailList"
            stripe
            style="
              width: 100%;
              font-size: 14px;
              color: #909399;
              font-weight: 600;
            "
          >
            <el-table-column prop="reserveDate" label="就诊时间" />
            <el-table-column prop="hosname" label="医院" />
            <el-table-column prop="depname" label="科室" />
            <el-table-column prop="title" label="医生" />
            <el-table-column prop="amount" label="医事服务费" />
            <el-table-column prop="patientName" label="就诊人" />
            <el-table-column prop="orderStatusString" label="订单状态" />
            <el-table-column label="操作">
              <template #="{ row }">
                <!-- <el-button @click="getOrderInfo(row.id)">详情</el-button> -->
                <!-- <router-link :to="{ name: 'Order', query: { patientId: row.id,orderStatus:row.param.orderStatusString } }"
                  >详情</router-link
                > -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-pagination
            :current-page="page"
            :total="total"
            :page-size="limit"
            :page-sizes="[5, 10, 20, 30]"
            style="padding: 20px 0"
            layout="prev, pager, next, jumper, ->, sizes, total"
            @current-change="getOrderList"
            @size-change="getOrderList(1, $event)"
          />
        </div>
      </div>
    </el-card>
    <!-- 挂号详情信息 -->
    <el-card v-else style="min-width: 960px; height: 600px">
      <template #header>
        <div class="title">
          <span>挂号详情</span>
        </div>
      </template>
      <template #default>
        <el-card class="detailCard" shadow="never">
          <template #header>
            <div class="sTitle">
              <div class="orderStatus">
                <el-button type="success" size="small">
                  <el-icon style="margin-right: 5px"><Select /></el-icon>
                  预约成功,待支付</el-button
                >
              </div>
              <div class="orderCodeInfo">
                <div style="margin-right: 5px">
                  <img
                    style="width: 40px; height: 40px"
                    src="../../../../public/static/orderDetailCode.png"
                    alt=""
                  />
                </div>
                <div style="display: flex; flex-direction: column">
                  <span>微信关注"北京114预约挂号"</span>
                  <span>"快速预约挂号"</span>
                </div>
              </div>
            </div>
          </template>
          <div class="detailInfo">
            <div>
              <el-descriptions
                class="margin-top"
                :column="1"
                size="default"
                border
              >
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">就诊人信息</div>
                  </template>
                  {{ orderDetailInfo!.patientName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">就诊日期</div>
                  </template>
                  {{ orderDetailInfo!.reserveDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">就诊医院</div>
                  </template>
                  {{ orderDetailInfo!.hosname }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">就诊科室</div>
                  </template>
                  {{ orderDetailInfo!.depname }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">医生职称</div>
                  </template>
                  {{ orderDetailInfo!.title }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">医生服务费</div>
                  </template>
                  <span style="color: red; font-weight: 400">{{
                    orderDetailInfo!.amount
                  }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">挂号订单</div>
                  </template>
                  {{ orderDetailInfo!.outTradeNo }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">挂号时间</div>
                  </template>
                  {{ orderDetailInfo!.createTime }}
                </el-descriptions-item>
              </el-descriptions>
              <div style="margin-top: 10px">
                <el-button>取消预约</el-button>
                <el-button type="primary">支付</el-button>
              </div>
            </div>
            <div>
              <el-card shadow="never" style="width: 500px">
                <template #header>
                  <div style="font-size: 14px">注意事项</div>
                </template>
                <div class="detailSign" style="font-size: 14px">
                  <ol>
                    <li>
                      1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；
                    </li>
                    <li style="color: red">
                      2.【取号】就诊当天需在2023-08-1209:00前
                      在医院取号，未取号视为爽约，该号不退不换；
                    </li>
                    <li>
                      3.【退号】在2023-08-11 15:30前可在线退号
                      ，逾期将不可办理退号退费；
                    </li>
                    <li>
                      4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
                    </li>
                    <li>
                      5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
                    </li>
                  </ol>
                </div>
              </el-card>
            </div>
          </div>
        </el-card>
      </template>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Order",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  reqAuthStatusList,
  reqOrderList,
  reqPatientList,
  reqOrderInfo,
} from "@/api/user";
import type {
  authStatusItemType,
  updatePatientType,
  orderRecordsItemType,
} from "@/api/user";

const router = useRouter();
const route = useRoute();

// 总条数
const total = ref(0);
// 当前页码
const page = ref(1);
// 每页条数
const limit = ref(10);
// 就诊人列表
const patientList = ref<updatePatientType[]>();
// 挂号状态列表
const statusList = ref<authStatusItemType[]>([]);
// 是否显示的是挂号订单详情
const isDetail = ref(false);
// 选择的患者
const selectPatient = ref("");
// 挂号订单列表
const orderDetailList = ref<orderRecordsItemType[]>([]);
// 挂号订单详情
const orderDetailInfo = ref<orderRecordsItemType>();

// 获取状态列表
const getStatusList = async () => {
  try {
    statusList.value = await reqAuthStatusList();
    console.log(route.query);
  } catch (e) {}
};
// 获取挂号订单列表
getStatusList();
const getOrderList = async (p = page.value, size = limit.value) => {
  page.value = p;
  limit.value = size;
  try {
    const res = await reqOrderList(page.value, limit.value);
    page.value = res.current;
    total.value = res.total;
    limit.value = res.size;
    orderDetailList.value = res.records;
  } catch (e) {}
};
getOrderList();
// 获取就诊人信息列表
const getPatientList = async () => {
  try {
    patientList.value = await reqPatientList();
  } catch (e) {}
};
getPatientList();
// 获取挂号订单详情
const getOrderInfo = async (id: number) => {
  try {
    router.push(`/user/order/?id=${id}`);
    orderDetailInfo.value = await reqOrderInfo(id);
  } catch (e) {}
};
</script>

<style scoped>
.title {
  font-size: 21px;
  font-weight: 500;
}
.detailCard {
  border: none;
}

.detailCard .sTitle {
  display: flex;
  justify-content: space-between;
}

.detailCard .orderCodeInfo {
  display: flex;
}
.detailCard .orderCodeInfo span {
  font-size: 14px;
}
.cell-item {
  width: 100px;
}
.detailInfo {
  display: flex;
  justify-content: space-between;
}

.detailSign ol li {
  margin: 5px 0;
}
</style>
